<template>
    <div class="loading">
        <i></i>
        <i></i>
        <i></i>
    </div>
</template>

<style lang="less" scoped>
.loading{
    padding:20px 0;
    display: flex;
    justify-content: center;
    i{
        width: 2px;
        height: 20px;
        margin-left: 5px;
        transform-origin: left bottom;
        background-color: #5dcaa8;
        animation: loading 1.5s 0.2s infinite;
        &:nth-child(2){
            animation-delay: -0.6s;
        }
        &:nth-child(3){
            animation-delay: -0.2s;
        }
    }
}
@keyframes loading {
    from{
        transform: scaleY(1.2);
    }
    to{
        transform: scaleY(0.2);
    }
}
</style>